import React from 'react'
import {Link} from 'react-router-dom'
import {Toast, Modal} from 'antd-mobile'
import utils from '../../common/utils'
import history from '../../history'
import { get, destroy } from '../../axios'
import moment from 'moment'

const {alert} = Modal

class Milestone extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            list: [],
            project_id: null
        }
    }

    componentDidMount() {
        let project_id = this.props.match.params.project_id
        this.setState({project_id})
        this.get_milestone_list(project_id)
    }

    get_milestone_list (project_id) {
        get(`/mem/project-milestone/${project_id}`).then(
            resp => {
                if (resp.success) {
                    this.setState({list: resp.data})
                }
            }
        )
    }
    destroy_request (id) {
        destroy(`/mem/project-milestone/${id}`).then(
            resp => {
                if (resp.success) {
                    Toast.success('删除成功')
                    this.get_milestone_list(this.state.project_id)
                }
            }
        )
    }

    destory_milestone = (id) =>  {

        alert('删除里程碑', '确认删除里程碑？', [
            { text: '取消', onPress: () => console.log('cancel') },
            { text: '确认', onPress: () => this.destroy_request(id) },
          ])
       
    }
    render() {
        return (
            <React.Fragment>
            <div className='milestone'>
                {
                    this.state.list.map(x => <Item key={x.id} m={x} c={this.destory_milestone}/>)
                }
            </div>
            <div className="btns">
                <a className="contact" onClick={()=>history.push(`/set-milestone?project_id=${this.state.project_id}`)}>新增里程碑</a>
            </div>
            </React.Fragment>
        )
    }
}

const Item = ({m, c}) => 
    <div className='con'>
        <div className='info'>
            <p>{m.title}</p>
            <p>{moment(m.created_at).format('ll')}</p>
        </div>
        <div className='btn'>
            <a onClick={()=>c(m.id)}>删除</a>
        </div>
    </div>
export default Milestone